<template>
  <div class="my-custom" v-loading="loading" element-loading-text="加载中...">
    <div class="my-custom-head-box">
      <iframe ref="resizeFrame" class="resizeFrame" frameborder="0" id="AccElFormRef"></iframe>

      <div class="my-custom-head">
        <!--客户类型  -->
        <div class="search-top">
          <el-select style="width: 120px" class="search-top-select" size="small" v-model="searchForm.is_mine"
            placeholder="请选择">
            <el-option label="我的" :value="1" />
            <el-option label="全公司" :value="0" />
          </el-select>
          <div class="tab-box">
            <el-tabs v-model="searchForm.business_nature" class="demo-tabs">
              <el-tab-pane v-for="item in setupList" :label="item.name" :name="item.id"></el-tab-pane>
            </el-tabs>
          </div>
        </div>

        <!-- 其他搜索条件 -->
        <!--搜索-上  -->
        <div v-show="complexType">
          <el-form class="demo-searchForm" label-width="120px">
            <el-form-item label="预算">
              <el-input v-model="searchForm.budget_min" placeholder="预算最小金额" style="width: 220px" />
              <el-input v-model="searchForm.budget_max" placeholder="预算最大金额" style="width: 220px; margin-left: 20px" />
            </el-form-item>
            <el-form-item label="商家进度">
              <el-select v-model="searchForm.project_stage" placeholder="商家进度" style="width: 220px">
                <el-option v-for="ele in stageOption" :key="ele.id" :label="ele.name" :value="ele.name" />
              </el-select>
            </el-form-item>
            <el-form-item label="项目把握度">
              <el-select v-model="searchForm.possibility" placeholder="项目把握度" style="width: 220px">
                <el-option v-for="ele in possibilityOption" :key="ele.id" :label="ele.name" :value="ele.name" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <!--搜索-下  -->
        <el-form inline class="demo-searchForm">
          <el-form-item>
            <el-select v-model="searchForm.srch_type" placeholder="查询类型">
              <el-option label="客户名称" value="客户名称" />
              <el-option label="商机名称" value="商机名称" />
              <el-option label="销售" value="销售" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="searchForm.keyword" placeholder="请输入查询内容" />
          </el-form-item>
          <el-form-item>
            <el-date-picker v-model="searchForm.time" type="datetimerange" range-separator="至"
              start-placeholder="招标开始时间" end-placeholder="招标结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchFun">查询</el-button>
            <el-button @click="resetFun">重置</el-button>
            <el-button type="primary" @click="addFun">
              <template #icon>
                <el-icon>
                  <IEpPlus />
                </el-icon>
              </template>
              新增商机
            </el-button>
            <el-button type="primary" @click="complexFun" link>复杂搜索
              <IEpArrowDown v-show="!complexType" style="margin-left: 5px" />
              <IEpArrowUp v-show="complexType" style="margin-left: 5px" />
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="my-custom-content">
      <el-table :data="tableData" :height="store.tableHeight - headerHeight + 10" border>
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column prop="oppo_name" label="商机名称" width="200">
          <template #default="{ row }">
            <el-button type="primary" @click="detailFun(row)" link>
              {{ row.oppo_name }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="customer_name" label="客户名称" width="150" />
        <el-table-column prop="business_nature" label="商机性质" width="110" />
        <el-table-column prop="business_budget" label="预算金额(元)" width="130" />
        <el-table-column prop="bidding_time" label="招标时间" width="170" />
        <el-table-column prop="possibility" label="把握度" />
        <el-table-column prop="project_stage" label="商机进度" width="200" />
        <el-table-column prop="owner_name" label="销售" width="200" />
        <el-table-column prop="last_time" label="最后跟进时间" width="170" />
        <el-table-column width="110" label="操作" align="center" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" @click="updateOpen(row)" link>
              编辑
            </el-button>
            <el-button type="danger" link @click="delFun(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="my-custom-content-pagination">
        <div></div>
        <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[20, 50, 100, 200]"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
  <detailPage ref="detailPageRef" />
  <addPage ref="addPageRef" @refreshList="refreshList" />
</template>
<script setup>
import { useCounterStore } from "@/stores/counter.js";
import { listApi, delApi } from "@/plugins/api/customer/manage/opportunity";
// 字典查询
import { listApi as dictApi } from "@/plugins/api/system/dict";
import detailPage from "../customer/manage/components/tabDialog/Tab9-detail.vue";
import addPage from "./DialogAdd.vue";
const store = useCounterStore();
//
let resizeFrame = ref(null);
let headerHeight = ref(0);
function formAddEvent() {
  if (resizeFrame.value) {
    resizeFrame.value.contentWindow.addEventListener("resize", () => {
      nextTick(() => {
        let dom = document.getElementById("AccElFormRef");
        let height = dom.clientHeight;
        headerHeight.value = height;
      });
    });
  }
}

// 复杂搜索
let setupList = ref([
  {
    name: "全部",
    id: "",
  },
  {
    name: "漏斗内",
    id: "漏斗内",
  },
  {
    name: "漏斗外",
    id: "漏斗外",
  },
]);
let complexType = ref(false);
function complexFun() {
  complexType.value = !complexType.value;
}

// 详情
let detailPageRef = ref(null);
function detailFun(row) {
  detailPageRef.value.initFun(row);
}
//
let loading = ref(false);
let searchForm = ref({ business_nature: "" });
let searchData = ref({});
let tableData = ref([]);

// 分页
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
const handleSizeChange = (val) => {
  pageSize.value = val;
  getData();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getData();
};
// 条件查询
function searchFun() {
  let obj = { ...searchForm.value };
  if (searchForm.value.time) {
    obj.bidding_start_time = searchForm.value.time[0];
    obj.bidding_end_time = searchForm.value.time[1];
  }
  searchData.value = { ...obj };
  tableData.value = [];
  currentPage.value = 1;
  getData();
}
// 重置
function resetFun() {
  searchForm.value = { business_nature: "" };
  searchData.value = {};
  tableData.value = [];
  currentPage.value = 1;
  getData();
}

function getData() {
  let obj = {
    page: currentPage.value,
    pageSize: pageSize.value,
  };
  obj = { ...obj, ...searchData.value };
  loading.value = true;
  listApi(obj)
    .then((res) => {
      tableData.value = res.list;
      total.value = res.page.total;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}
function refreshList() {
  resetFun();
}
// 增加
let addPageRef = ref(null);
function addFun() {
  addPageRef.value.initFun("add");
}
// 编辑
function updateOpen(row) {
  addPageRef.value.initFun("update", row);
}
// 删除
function delFun(row) {
  ElMessageBox.confirm("确认删除，是否继续?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delApi({
        id: row.id,
      }).then(() => {
        ElMessage({
          type: "success",
          message: "删除成功！",
        });
        getData();
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消。",
      });
    });
}
// 获取字典项
function getDictionary(dict_id) {
  return new Promise((resolve, reject) => {
    dictApi({ dict_id: dict_id }).then((data) => {
      resolve(data);
    });
  });
}
let stageOption = ref([]);
let possibilityOption = ref([]);
//
onMounted(() => {
  formAddEvent();
  getData();
  getDictionary(7).then((data) => {
    stageOption.value = data;
  });
  getDictionary(8).then((data) => {
    possibilityOption.value = data;
  });
  console.log(searchData.value);
  let aaa = { ...searchForm.value, ...searchData.value };
  console.log(aaa);
});
</script>
<style lang="scss" scoped>
.my-custom {
  width: 100%;
  height: 100%;

  .my-custom-head-box {
    position: relative;

    .resizeFrame {
      position: absolute;
      z-index: -1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }

  .my-custom-head {
    white-space: nowrap;

    .search-top {
      display: flex;
      width: 100%;
      overflow: hidden;
      overflow-x: auto;

      position: relative;

      &::before {
        position: absolute;
        content: "";
        width: 100%;
        border-bottom: 2px solid #e4e7ed;
        left: -160px;
        bottom: 14px;
      }

      >.search-top-select {
        align-self: center;
        margin-bottom: 13px;
      }

      >.tab-box {
        align-self: center;
        margin-left: 20px;
        width: calc(100% - 140px);
      }
    }

    .search-center {
      width: 100%;
      white-space: wrap;
      margin-bottom: 10px;
    }

    .attribute-item {
      margin-right: 5px;
      margin-bottom: 5px;
      cursor: pointer;
      user-select: none;
    }
  }

  .my-custom-content-pagination {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
}
</style>
